<template>
  <div class="wrapper">
    <div class="my-page">
      <!-- 用户信息卡片 -->
      <div class="user-card">
        <div class="avatar-placeholder"></div>
        <div class="user-info">
          <h2 class="username">{{ username }}</h2>
          <p class="welcome">欢迎回来</p>
        </div>
      </div>

      <!-- 功能按钮区域 -->
      <div class="action-buttons">
        <button class="action-btn change-password-btn" @click="handleChangePassword">
          <span class="btn-icon">🔒</span>
          <span class="btn-text">修改密码</span>
        </button>

        <button class="action-btn address-management-btn" @click="handleAddressManagement">
          <span class="btn-icon">📍</span>
          <span class="btn-text">地址管理</span>
        </button>

        <button v-if="isAdmin" class="action-btn user-management-btn" @click="handleUserManagement">
          <span class="btn-icon">👥</span>
          <span class="btn-text">用户管理</span>
        </button>

        <button class="action-btn logout-btn" @click="handleLogout">
          <span class="btn-icon">🚪</span>
          <span class="btn-text">退出登录</span>
        </button>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import Footer from '../components/Footer.vue';

export default {
  components: {
    Footer
  },
  setup() {
    const username = ref('用户');
    const isAdmin = ref(false);

    // 解析JWT获取用户信息
    const parseJWT = () => {
      const token = sessionStorage.getItem('jwt');
      if (token) {
        try {
          const payload = token.split('.')[1];
          const base64 = payload.replace(/-/g, '+').replace(/_/g, '/');
          const decodedPayload = JSON.parse(atob(base64));

          // 获取用户名
          username.value = decodedPayload.sub || decodedPayload.username || decodedPayload.preferred_username || '用户';

          // 检查ADMIN权限
          const authString = decodedPayload.auth || '';
          const authorities = authString.split(',');
          isAdmin.value = authorities.includes('ADMIN');

        } catch (error) {
          console.error('解析JWT失败:', error);
          username.value = sessionStorage.getItem('username') || '用户';
        }
      } else {
        username.value = sessionStorage.getItem('username') || '用户';
      }
    };

    onMounted(() => {
      parseJWT();
    });

    return {
      username,
      isAdmin
    };
  },
  methods: {
    handleChangePassword(){
      this.$router.push({path:'/changePassword'});
    },
    handleUserManagement(){
      this.$router.push({path:'/userManagement'});
    },
    handleAddressManagement(){
      this.$router.push({path:'/userAddress'});
    },
    handleLogout() {
      // 清除sessionStorage中的jwt
      sessionStorage.removeItem('jwt');
      // 跳转到登录页面
      this.$router.push({ path: '/login' });
    }
  }
}
</script>

<style scoped>
.wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.my-page {
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 80px);
}

.user-card {
  width: 100%;
  max-width: 400px;
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20px;
  padding: 25px;
  box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.08),
      0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

.avatar-placeholder {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.user-info {
  flex: 1;
}

.username {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #2d3748;
  letter-spacing: -0.5px;
}

.welcome {
  margin: 8px 0 0;
  font-size: 16px;
  color: #718096;
  font-weight: 500;
}

.action-buttons {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.action-btn {
  width: 100%;
  padding: 18px 20px;
  border: none;
  border-radius: 15px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.action-btn:active {
  transform: translateY(0);
}

.change-password-btn {
  background: linear-gradient(45deg, #4a90e2 0%, #357abd 100%);
  color: white;
}

.change-password-btn:hover {
  background: linear-gradient(45deg, #3a7bc8 0%, #2c6bb7 100%);
}

.address-management-btn {
  background: linear-gradient(45deg, #6c757d 0%, #5a6268 100%);
  color: white;
}

.address-management-btn:hover {
  background: linear-gradient(45deg, #5a6268 0%, #495057 100%);
}

.user-management-btn {
  background: linear-gradient(45deg, #28a745 0%, #218838 100%);
  color: white;
}

.user-management-btn:hover {
  background: linear-gradient(45deg, #218838 0%, #1e7e34 100%);
}

.btn-icon {
  font-size: 20px;
}

.btn-text {
  flex: 1;
  text-align: center;
}

/* 动画效果 */
.user-card {
  animation: slideUp 0.6s ease-out;
}

.action-btn {
  animation: fadeIn 0.8s ease-out;
}

.action-btn:nth-child(2) {
  animation-delay: 0.1s;
}

.action-btn:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 480px) {
  .my-page {
    padding: 20px 15px;
  }

  .user-card {
    padding: 20px;
    border-radius: 16px;
  }

  .avatar-placeholder {
    width: 60px;
    height: 60px;
  }

  .username {
    font-size: 20px;
  }

  .welcome {
    font-size: 15px;
  }

  .action-btn {
    padding: 16px;
    font-size: 16px;
  }
}

.logout-btn {
  background: linear-gradient(45deg, #dc3545 0%, #c82333 100%);
  color: white;
}

.logout-btn:hover {
  background: linear-gradient(45deg, #c82333 0%, #b81d2a 100%);
}

.logout-btn:active {
  transform: translateY(0);
}
</style>